<template>
  <!-- 修改密码组件 -->
  <div class="maskDiv" v-show="modifyPasswordDialog">
    <Dialog
            ref="modifyDialog"
            v-model="modifyPasswordDialog"
            :borderType="borderType"
            :title="modifytitle"
            :dialogStyle="{width:'400px'}"
            :modal="true"
            @close="closeModifyDialog"
            :closable="closable">

      <div style="padding: 30px 20px;text-align: center;">
        <p class="mytext">{{myModifyText}}</p>
        <TextBox
                v-model="usernameModify"
                placeholder="请输入工号"
                class="inputStyle"
                :inputStyle="{ 'font-size': '12px' }"
                iconCls="icon-man"
                v-bind:disabled="true"
                @keyup.enter.native="passwordFocusM()"
        ></TextBox>
        <!-- <PasswordBox
                ref="initialPassword"
                v-model="initialPassword"
                placeholder="请输入原密码"
                class="inputStyle"
                :inputStyle="{ 'font-size': '12px' }"
                @keyup.enter.native="toNewPassword()"
                :revealed="true"
                :showEye="false"
        ></PasswordBox> -->
        <div class="passwordBox">
            <input :type="passwordType2" placeholder="请输入原密码" ref="initialPassword"
                v-model="initialPassword"  class="inputStyled" @keyup.enter="toNewPassword()">
            <span :class="rightIcon2" @click="seeNum2"></span>
        </div>

        <!-- <PasswordBox
                ref="newPassword"
                v-model="newPassword"
                placeholder="请输入新密码"
                class="inputStyle"
                :inputStyle="{ 'font-size': '12px' }"
                @keyup.enter.native="toSaveM()"
                :revealed="true"
                :showEye="false"
        ></PasswordBox> -->
        <div class="passwordBox">
            <input :type="passwordType3" placeholder="请输入新密码" ref="newPassword"
                v-model="newPassword"  class="inputStyled" @keyup.enter="toSaveM()">
            <span :class="rightIcon3" @click="seeNum3"></span>
        </div>

        <div style="height: 10px"></div>
        <LinkButton :disabled="disableCode2" class="loginBtn" @click="saveM()">保 存</LinkButton>
      </div>

    </Dialog>
  </div>
</template>

<script>
    import login from "@/api/login/login";
    import cfg from "@/config/config";
    import user from "@/api/user";

export default {
  props: {

  },
  data() {
    return {
        rightIcon2:"closed-eye",
        passwordType2: "password",
        rightIcon3:"closed-eye",
        passwordType3: "password",
        modifyPasswordDialog:false,   //修改密码弹窗
        closable:false,   //是否显示关闭按钮
        usernameModify:"",  //工号
        initialPassword:"",  //初始密码
        newPassword:"",  //新密码
        borderType:"",  //边框类型
        modifytitle:"修改密码",
        myModifyText:"",   //弹窗中提示的文字
        disableCode2:false,
    };
  },
  mounted() {
      this.$refs.modifyDialog.close();
      //获取登陆人信息
      this.getLoginerInformation();
  },
  methods: {
      //获取登陆人信息
      async getLoginerInformation() {
        // 获取登录人的信息
        let res = await user.getLoginerInfoList({});
        if (res.success) {
          this.usernameModify = res.result[0].userNo
        } else {
          this.$messager.alert({
            title: "提示框",
            icon: "error",
            msg: res.message
          });
        }
      },
      seeNum2() {
            this.passwordType2 = this.passwordType2 === 'password'?'text':'password';
            this.rightIcon2= this.rightIcon2 === 'closed-eye'?'eyeOn':'closed-eye';
        },
        seeNum3() {
            this.passwordType3 = this.passwordType3 === 'password'?'text':'password';
            this.rightIcon3= this.rightIcon3 === 'closed-eye'?'eyeOn':'closed-eye';
        },
      // 外部mounted调用默认关闭此弹窗
      close(){
          this.$refs.modifyDialog.close();
      },
      // 关闭弹窗和模拟遮罩
      closeModifyDialog(){
          this.modifyPasswordDialog = false;
          this.$refs.modifyDialog.close();
          this.closable = false;
          this.usernameModify = "";  //工号
          this.initialPassword = "";  //初始密码
          this.newPassword = "";  //新密码
      },
      // 修改密码方法分割线
      modifyDialogOpen(){
          // 点击修改按钮打开，显示关闭按钮
          this.closable = true;
          this.modifyPasswordDialog = true;
          this.$refs.modifyDialog.open();
          this.myModifyText = "修改密码";
          this.borderType = "thick";

      },
      firstLogin(){
          // 首次登陆更改密码，不显示关闭按钮,首次使用工号密码登陆调用此方法
          this.modifyPasswordDialog = true;
          this.$refs.modifyDialog.open();
          this.myModifyText = "首次登录请修改密码";
          this.borderType = "none";
          this.modifytitle = "";

      },

      passwordFocusM() {
          if (this.usernameModify) {
              this.$refs.initialPassword.focus();
          }
          return
      },
      toNewPassword() {
          if (this.initialPassword) {
              this.$refs.newPassword.focus();
          }
          return
      },
      toSaveM() {
          if (this.newPassword && this.disableCode2 == false) {
              this.saveM();
          }
          return
      },
      async saveM(){
          if (!this.validateFormM()) return false;

          //调用方法
          this.$loading("正在保存中...");
          //进行登录处理
          let param = {
              userNo: this.usernameModify,
              userPasswordOld : this.initialPassword,
              userPassword: this.newPassword
          };
        //   console.log(param);
          //调用后台方法
          let res = await login.modifyPassword(param);
          // console.log(res);
          this.$loading.close();
          if (res.success){
              this.$messager.alert({
                  title: "提示框",
                  icon: "success",
                  msg: "修改成功，请在下次登录时使用新密码登录"
              });
              this.closeModifyDialog();
            //   window.open(cfg.loginUrl,"_self");  //问题：本页面跳转登录页面跳不出父级框架
          } else {
              this.disableCode2 = true,
              this.$messager.alert({
                  title: "提示框",
                  icon: "error",
                  msg: res.message,
                  result: r => {
                    this.disableCode2 = false;
                }
              });
          }

      },
      validateFormM() {
          if (null == this.usernameModify || "" == this.usernameModify) {
              this.$messager.alert({
                  title: "提示框",
                  icon: "warning",
                  msg: "工号不能为空"
              });
              return false;
          }
          if (null == this.initialPassword || "" == this.initialPassword) {
              this.$messager.alert({
                  title: "提示框",
                  icon: "warning",
                  msg: "原密码不能为空"
              });
              return false;

          }
          if (null == this.newPassword || "" == this.newPassword) {
              this.$messager.alert({
                  title: "提示框",
                  icon: "warning",
                  msg: "新密码不能为空"
              });
              return false;
          } else {
              //验证密码长度是否小于8
              if (this.newPassword.length < 8) {
                  this.$messager.alert({
                      title: "提示框",
                      icon: "warning",
                      msg: "请输入大于或等于8位长度的密码"
                  });
                  return false;
              } else if (!this.verifyPassword(this.newPassword)){
                  this.$messager.alert({
                      title: "提示框",
                      icon: "warning",
                      msg: "请输入至少包含数字、字母、特殊字符其中任意两种组合的密码"
                  });
                  return false;
              }

          }

          return true;
      },
      // 正则验证密码
      verifyPassword(password){
          var str = password;
          //验证密码匹配三种组合中的两种
          var reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,}$/;
          if (reg.test(str)) {
              return true;
          } else {
              return false;
          }
      },

  }
};
</script>

<style scoped>
  .inputStyle {
    height: 40px;
    width: 80%;
    margin-bottom: 10px;
  }
  .mytext {
    font-size: 16px;
    text-align: center;
    margin: 0 0 20px 0;
  }
</style>
